<template>
  <div class="column-list">
    <div v-for="(item, index) in ColumnList" :key="index" class="list-item">
      <div class="title">
        <img class="avatar" :src="item.avatar" />
        {{ item.id }}:{{ item.title }}
      </div>
      <div class="description">{{ item.des }}</div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType, computed } from 'vue'

export interface ColumnProps {
  id: number
  title: string
  des: string
  avatar?: string
}

export default defineComponent({
  name: 'ColumnList',
  props: {
    list: {
      type: Array as PropType<ColumnProps[]>,
      required: true,
    },
  },
  setup(props) {
    const ColumnList = computed(() => {
      return props.list.map((item) => {
        if (!item.avatar) {
          item.avatar = 'https://picsum.photos/id/239/200/200'
        }
        return item
      })
    })

    return {
      ColumnList,
    }
  },
})
</script>

<style scoped lang="scss">
.column-list {
  display: flex;
  flex-wrap: wrap;
  padding: 0 100px;
  .list-item {
    width: 30%;
    box-sizing: border-box;
    border-radius: 10px;
    box-shadow: 0 5px 15px #ddd;
    padding: 20px 25px;
    margin-bottom: 50px;
    &:not(:nth-of-type(3n)) {
      margin-right: 5%;
    }
    .title {
      display: flex;
      align-items: center;
      font-size: 24px;
      color: #666;
      .avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        margin-right: 20px;
      }
    }
    .description {
      margin-top: 30px;
      padding: 10px;
      font-size: 22px;
      line-height: 32px;
      text-align: justify;
    }
  }
}
</style>